<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
	</head>

	<body>
		<canvas id="canvas" style="border: 1px solid red;"></canvas>
		<script type="text/javascript">
			var canvas = document.getElementById('canvas')
			var cxt = canvas.getContext('2d')
			canvas.width = 400
			canvas.height = 300

			function draw() {
				for(var i = 0; i < 16; i++) {
					for(var j = 0; j < 12; j++) {
						cxt.fillStyle = 'rgb(' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ',' + Math.floor(Math.random() * 256) + ')'
						cxt.fillRect(25 * i, 25 * j, 25, 25)
					}
				}
				setTimeout(draw,800)
			}
			draw()
		</script>
	</body>

</html>